import { Card, CardContent } from "@/components/ui/card"
import { useTheme } from "@/contexts/ThemeContext"

export default function Header() {
  const { theme, toggleTheme } = useTheme();

  return (
    <header className="relative border-b border-border/40 bg-background/80 backdrop-blur-md">
      <div className="container mx-auto px-4 py-8">
        {/* 主题切换按钮 */}
        <div className="absolute top-4 right-4">
          <button
            onClick={toggleTheme}
            className="p-2 rounded-lg bg-white/10 hover:bg-white/20 dark:bg-gray-800/50 dark:hover:bg-gray-700/50 border border-gray-200/50 dark:border-gray-700/50 transition-all duration-200 backdrop-blur-sm"
            aria-label="切换主题"
          >
            {theme === 'light' ? (
              <svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
              </svg>
            ) : (
              <svg className="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
            )}
          </button>
        </div>
        
        <div className="text-center">
          <div className="inline-flex items-center space-x-3 mb-4">
            <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center border border-border/50">
              <span className="text-2xl">⚔️</span>
            </div>
            <div>
              <h1 className="text-3xl font-bold text-gradient">
                Dota2 Stats
              </h1>
              <div className="text-sm text-muted-foreground">
                Professional Player Analytics
              </div>
            </div>
          </div>
          
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Comprehensive player statistics and match analysis powered by OpenDota API
          </p>
          
          <div className="flex items-center justify-center space-x-6 mt-6">
            <div className="flex items-center space-x-2 text-sm text-muted-foreground">
              <div className="w-2 h-2 rounded-full bg-green-500"></div>
              <span>Live Data</span>
            </div>
            <div className="flex items-center space-x-2 text-sm text-muted-foreground">
              <div className="w-2 h-2 rounded-full bg-blue-500"></div>
              <span>Real-time Updates</span>
            </div>
            <div className="flex items-center space-x-2 text-sm text-muted-foreground">
              <div className="w-2 h-2 rounded-full bg-purple-500"></div>
              <span>Advanced Analytics</span>
            </div>
          </div>
        </div>
      </div>
    </header>
  )
}